<script setup>
import { ref } from 'vue'
import { Folder, PictureRounded, Scissor, Upload } from "@element-plus/icons-vue";
import { ElMessage, ElUpload } from "element-plus";

// 历史记录数组
const messages = ref([])
// 对话框可见性
const dialogVisible = ref(false)
// 选中的文件
const selectedFile = ref(null)
// 文件描述
const description = ref('')
// 预览图片URL
const previewUrl = ref('')
// 当前用户名
const username = ref('李杭杭')

// 打开文件选择对话框
const handleFileSelect = (file) => {
    selectedFile.value = file.raw
    if (file.raw.type.startsWith('image/')) {
        previewUrl.value = URL.createObjectURL(file.raw)
    } else {
        previewUrl.value = null
    }
    return false // 阻止自动上传
}

// 提交文件
const submitFile = () => {
    if (!selectedFile.value) {
        ElMessage.warning("请先选择文件！")
        return
    }

    const newRecord = {
        username: username.value,
        filename: selectedFile.value.name,
        type: selectedFile.value.type,
        description: description.value,
        timestamp: new Date(),
        preview: previewUrl.value,
        file: selectedFile.value
    }

    messages.value.push(newRecord)
    ElMessage.success("提交成功！")
    dialogVisible.value = false
    resetForm()
}

// 重置表单
const resetForm = () => {
    selectedFile.value = null
    description.value = ''
    previewUrl.value = ''
}

// 格式化时间显示
const formatTime = (date) => {
    return date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}

</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-main style="display: flex; flex-direction: column; padding: 0;">
                <!-- 历史记录展示区 -->
                <div class="message-container">
                    <div class="message-list">
                        <div
                            v-for="(record, index) in messages"
                            :key="index"
                            class="message-item"
                        >
                            <div class="meta-info">
                                <div class="meta-left">
                                    <span class="username">{{ record.username }}</span>
                                    <span class="time">{{ formatTime(record.timestamp) }}</span>
                                </div>
                            </div>
                            <div class="content">
                                <div v-if="record.type.startsWith('image/')" class="preview">
                                    <img :src="record.preview" alt="图片预览" class="preview-image"/>
                                </div>
                                <div v-else class="file-info">
                                    <el-icon size="20"><Folder /></el-icon>
                                    <span class="filename">{{ record.filename }}</span>
                                </div>
                                <div class="description">{{ record.description }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="submit-container">
                    <el-button
                        type="primary"
                        :icon="Upload"
                        @click="dialogVisible = true"
                        class="submit-btn"
                    >
                        提交文件
                    </el-button>
                </div>
                <!-- 提交对话框 -->
                <el-dialog v-model="dialogVisible" title="提交文件" width="500px">
                    <el-upload
                        drag
                        :auto-upload="false"
                        :on-change="handleFileSelect"
                        :show-file-list="false"
                    >
                        <div v-if="previewUrl" class="upload-preview">
                            <img v-if="selectedFile.type.startsWith('image/')" :src="previewUrl" class="preview-image"/>
                            <el-icon v-else size="50"><Folder /></el-icon>
                        </div>
                        <div v-else class="upload-tip">
                            <el-icon class="el-icon--upload"><upload /></el-icon>
                            <div class="el-upload__text">将文件拖到此处或<em>点击上传</em></div>
                        </div>
                    </el-upload>

                    <el-input
                        v-model="description"
                        type="textarea"
                        placeholder="请输入文件描述"
                        :rows="3"
                        class="description-input"
                    />

                    <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitFile">提交</el-button>
            </span>
                    </template>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>
/* 保持原有布局样式，新增以下样式 */
.submit-btn {
    width: 100%;
    height: 60px;
    font-size: 16px;
}

.upload-preview {
    padding: 20px;
    text-align: center;
}

.preview-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 4px;
}

.description-input {
    margin-top: 20px;
}

.message-item .content {
    margin-top: 8px;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.filename {
    color: var(--el-color-primary);
}

.description {
    color: #666;
    font-size: 0.9em;
    margin-top: 8px;
}
.common-layout {
    height: 100vh;
}

.submit-container {
    position: absolute;
    bottom: 13.33%;  /* 定位在页面1/3处 */
    left: 0px;
    right: 0vh;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* 调整历史记录容器高度 */
.message-container {
    height: calc(100% - 100px); /* 留出按钮空间 */
    overflow-y: auto;
}

/* 保持原有按钮样式 */
.submit-btn {
    width: 200px;
    height: 50px;
    font-size: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
</style>
